/*
 * Slider for Bootstrap
 *
 * Copyright 2012 Stefan Petre
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * SCSS File by Detlef Beyer
 */

@import "compass";

@mixin slider_background-image ($colorstart:#f5f5f5, $colorend:#f9f9f9, $backcolor: #f7f7f7) {
  background-color: $backcolor;
  background-image: -moz-linear-gradient(top, $colorstart, $colorend);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($colorstart), to($colorend));
  background-image: -webkit-linear-gradient(top, $colorstart, $colorend);
  background-image: -o-linear-gradient(top, $colorstart, $colorend);
  background-image: linear-gradient(to bottom, $colorstart, $colorend);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$colorstart}', endColorstr='#{$colorend}',GradientType=0);
}

/* Variables should be defined outside of this file     */
/* doing it here just to keep things together in github */
$baseLineHeight:  20px;
$baseBorderRadius: 4px;


.slider {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  &.slider-horizontal {
    width: 210px;
    height: $baseLineHeight;
    .slider-track {
      height: $baseLineHeight/2;
      width: 100%;
      margin-top: -$baseLineHeight/4;
      top:  50%;
      left: 0;
    }
    .slider-selection {
      height: 100%;
      top: 0;
      bottom: 0;
    }
    .slider-handle {
      margin-left: -$baseLineHeight/2;
      margin-top: -$baseLineHeight/4;
      &.triangle {
        border-width: 0 $baseLineHeight/2 $baseLineHeight/2 $baseLineHeight/2;
        width: 0;
        height: 0;
        border-bottom-color: #0480be;
        margin-top: 0;
      }
    }
  }
  &.slider-vertical {
    height: 210px;
    width: $baseLineHeight;
    .slider-track {
      width: $baseLineHeight/2;
      height: 100%;
      margin-left: -$baseLineHeight/4;
      left: 50%;
      top: 0;
    }
    .slider-selection {
      width: 100%;
      left: 0;
      top: 0;
      bottom: 0;
    }
    .slider-handle {
      margin-left: -$baseLineHeight/4;
      margin-top: -$baseLineHeight/2;
      &.triangle {
        border-width: $baseLineHeight/2 0 $baseLineHeight/2 $baseLineHeight/2;
        width:  1px;
        height: 1px;
        border-left-color: #0480be;
        margin-left: 0;
      }
    }
  }
  input {
    display: none;
  }
  .tooltip-inner {
    white-space: nowrap;
  }
}

.slider-track {
	position: absolute;
	cursor: pointer;
	@include slider_background-image(#f5f5f5, #f9f9f9, #f7f7f7);
	@include box-shadow(inset 0 1px 2px rgba(0,0,0,0.1));
	@include border-radius($baseBorderRadius);
}

.slider-selection {
	position: absolute;
	@include slider_background-image(#f9f9f9, #f5f5f5, #f7f7f7);
  	@include box-shadow(inset 0 -1px 0 rgba(0,0,0,0.15));
  	@include box-sizing(border-box);
	@include border-radius($baseBorderRadius);
}

.slider-handle {
	position: absolute;
	width:  20px;
	height: 20px;
  background-color: #337ab7;
	@include slider_background-image(#149bdf, #0480be, #0e90d2);
	@include box-shadow(inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05));
	border: 0px solid transparent;
	&.round {
		@include border-radius($baseLineHeight);
	}
	&.triangle {
		background: transparent none;
	}
}